"use strict";
/**
 * Created by wtfssd on 2017/5/17.
 */
import * as React from 'react'

const {StyleSheet, View, Platform, ToastAndroid} = require('react-native');
const {Router, Scene, Reducer, Modal, Actions, Stack, ActionConst, Tabs, Overlay, Lightbox} = require('react-native-router-flux');
const {connect} = require('react-redux');

import MyIcon from "./component/icon";
import {ISIPHONE_X, NAVBAR_HEIFHT, TABBAR_HEIFHT} from "./constant";
import SignInPage from "./routers/auth/SignIn";
import SignUpPage from "./routers/auth/SignUp";
import ForgetPwdPage from "./routers/auth/ForgetPwd";
import OrderManagerPage from "./routers/orderManager/OrderManager";
import ProductManagerPage from "./routers/productManager/ProductManager";
import AddProductPage from "./routers/productManager/AddProduct";
import CustomMenuPage from "./routers/productManager/CustomMenu";
import ShopManagerPage from "./routers/shopManager/ShopManager";
import BalancePage from "./routers/balance/Balance";
import CreateShopPage from "./routers/createShop/CreateShop";

import Colors from "./assets/styles/Colors";
import OrderDetailPage from "./routers/orderManager/OrderDetail";
import IncomePage from "./routers/balance/Income";
import SettingPage from "./routers/auth/Setting";
import {AuthModel, BaseComponent} from "./interface/index";
import PushHandle from "./push.ios";

const TabIcon = (props) => {
    return (
        <View style={{position: 'absolute'}}>
            <MyIcon {...props} name={props.image} size={25} color={props.focused ? Colors.Primary : '#848484'}/>
        </View>
    )
};

const Styles = StyleSheet.create({
    tabBarSelectedItemStyle: {
        backgroundColor: '#fff',
        color: '#f00'
    },
    tabBarStyle: {
        height: TABBAR_HEIFHT,
        paddingBottom: ISIPHONE_X ? 20 : 0,
    },
    navigationBarStyle: {
        height: NAVBAR_HEIFHT,
    },
    icon: {
        width: 19,
        height: 20
    }
});

const defaultProps = {
    hideTabBar: false,
    tabs: true,
    showLabel: true,
    swipeEnabled: false,
    hideNavBar: true,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    tabBarSelectedItemStyle: Styles.tabBarSelectedItemStyle,
    tabBarStyle: Styles.tabBarStyle,
    activeTintColor: Colors.Primary,
    inactiveTintColor: '#848484',
    navigationBarStyle: Styles.navigationBarStyle,
    titleStyle: {
        color: '#333',
    },
};


const reducerCreate = params => {
    const defaultReducer = new Reducer(params);
    return (state, action) => {
        return defaultReducer(state, action);
    };
};

interface RoutersProps extends BaseComponent{
    auth?: AuthModel
}


class Routers extends React.Component<RoutersProps, any> {
    timer = null;
    topScenes = ['signIn', '_signIn', 'orderManager', '_orderManager', 'balance', '_balance'];
    backAndroidHandler = () => {
        if (this.topScenes.indexOf(Actions.currentScene) !== -1) {
            if (!this.timer) {
                console.log('2', this.timer);
                ToastAndroid.show('再按退出应用程序', ToastAndroid.SHORT);
                this.timer = setTimeout(() => {
                    console.log('3',);
                    clearTimeout(this.timer);
                    this.timer = null;
                }, 2000);
                return true;
            } else {
                clearTimeout(this.timer);
                this.timer = null;
                return false;
            }
        } else {
            Actions.pop();
            clearTimeout(this.timer);
            this.timer = null;
            return true;
        }
    };




    shouldComponentUpdate(nextProps: RoutersProps, nextState: any, nextContext: any): boolean {
        return false;
    }

    onEnter = (sceneKey)=>{
        switch (sceneKey){
            case 'orderManager':{
                this.props.dispatch({type:'order/fetchData'})
            }break;
            case 'productManager':{
                this.props.dispatch({type:'product/fetchCategoryList'})
            }break;
            case 'balance':{
                this.props.dispatch({type:'auth/upDataBalance'})
            }break;
            default:break;
        }
    };

    render() {
        return (
            <Router getSceneStyle={getSceneStyle} createReducer={reducerCreate}
                    backAndroidHandler={this.backAndroidHandler.bind(this)}>
                <Overlay key="overlay">
                    <Modal>
                        <Stack key="lightbox" panHandlers={null}>
                            <Scene key='root' initial>
                                <Tabs key="tabbar" {...defaultProps} >

                                    <Stack key="tab1" title="订单管理" tabBarLabel="订单管理" panHandlers={{}} image='icon-dingdan3' icon={TabIcon} initial>
                                        <Scene key="orderManager" title="订单管理" component={OrderManagerPage} hideNavBar onEnter={this.onEnter.bind(this,'orderManager')}/>
                                        <Scene key="orderDetail" title="订单详情" component={OrderDetailPage} hideNavBar hideTabBar/>
                                    </Stack>

                                    <Stack key="tab2" title="商品管理" tabBarLabel="商品管理" panHandlers={{}}
                                           image='icon-shangpin' icon={TabIcon}>
                                        <Scene key="productManager" title="商品管理" component={ProductManagerPage} hideNavBar onEnter={this.onEnter.bind(this,'productManager')}/>
                                        <Scene key="addProduct" title="添加商品" component={AddProductPage} hideNavBar hideTabBar/>
                                        <Scene key="customMenu" title="自定义菜单" component={CustomMenuPage} hideNavBar hideTabBar/>
                                    </Stack>

                                    <Stack key="tab3" title="店铺管理" tabBarLabel="店铺管理" panHandlers={{}} image='icon-shop'
                                           icon={TabIcon}>
                                        <Scene key="shopManager" title="店铺管理" component={ShopManagerPage} hideNavBar/>
                                    </Stack>

                                    <Stack key="tab4" title="营业额" tabBarLabel="营业额" panHandlers={{}}
                                           image='icon-zhangdan' icon={TabIcon}>
                                        <Scene key="balance" title="营业额" component={BalancePage} hideNavBar onEnter={this.onEnter.bind(this,'balance')}/>
                                        <Scene key="income" title="收支详情" component={IncomePage} hideNavBar/>
                                        <Scene key="setting" title="设置" component={SettingPage} hideNavBar/>
                                    </Stack>
                                </Tabs>
                            </Scene>
                        </Stack>

                        <Scene key="findPwd" component={ForgetPwdPage} hideNavBar hideTabBar/>

                        <Stack key='auth' panHandlers={null} initial>
                            <Scene key="signIn" component={SignInPage} hideNavBar hideTabBar initial/>
                            <Scene key="signUp" component={SignUpPage} hideNavBar hideTabBar/>
                            <Scene key="createShop" title='创建店铺' component={CreateShopPage} hideNavBar hideTabBar/>
                        </Stack>
                    </Modal>
                </Overlay>
            </Router>

        )
    }
}

export default connect(

)(Routers);

const getSceneStyle = function (props, computedProps) {
    return {
        display: 'flex',
        flex: 1,
        shadowColor: null,
        shadowOffset: null,
        shadowOpacity: null,
        shadowRadius: null,
        backgroundColor: 'white',
        paddingBottom: ISIPHONE_X ? 20 : 0
    };
};
